Vue.js mixins
mixinを擬似的に継承したりOverrideしたりする実装方法は、今ではやらない
名前がcomponentで(意図せず) 一致してしまう。
このthis.〇〇はどこに実装されているの?」
mixinの中での thisは、実際に使われる componentの thisなので..
「関数」の共通化が必要な場合は、その内部処理を単純な関数として(mixinを使わず)共通化する
mixinを使わなくとも、import して使えばよい。(必要な オブジェクト(関数)だけを importする)
共通化できる処理を書いておいて、componentに取り込む。
SFC上だと、
code: a_component.vue
import myMixins from '../mixins/myMinxins" //myMixIns.jsファイル
とすると、myMixIns.js(例)に書いたmethod, data, computed等が使える.
export default{ } jsファイルは exportしておいて、
名前がかち合った場合は、mergeされてる。かち合った場合は、
データオブジェクトは再帰的マージされ、コンフリクトした場合にはコンポーネントのデータが優先されます。
同じ名前のフック関数はそれら全てが呼び出されるよう配列にマージされます。ミックスインのフックはコンポーネント自身のフック前に呼ばれる
オブジェクトの値の場合は、コンポーネント優先
mixinがあると、component のソースが読みにくい。
component側のメソッドが、mixinsの定義ファイルの方が呼ばれてる場合は、、気が付けない...